<template>
  <div class="body-box">
    <window-title title="申请列表"></window-title>
    <div class="table-box">
      <el-table size="mini" border :data="list.data" @selection-change="handleSelectionChange" v-loading="load">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="头像" width="60">
            <template slot-scope="item">
                <el-image :src="item.row.user_info.Avatar" class="user-head-img"></el-image>
            </template>
        </el-table-column>
        <el-table-column label="姓名" prop="in_form[0].value"></el-table-column>
        <el-table-column label="手机号" prop="in_form[1].value"></el-table-column>
        <el-table-column label="时间" prop="CreateTime"></el-table-column>
        <el-table-column label="操作" width="100">
            <template slot-scope="item">
                <el-button size="mini" icon="el-icon-view" @click="see(item.row.in_form,item.row.MemberId)">查看</el-button>
                <!-- <el-button icon="el-icon-check" size="mini"  @click="applySet(1,item.row.MemberId)">同意</el-button>
                <el-button icon="el-icon-close" size="mini"  @click="applySet(2,item.row.MemberId)">拒绝</el-button> -->
            </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
          <div class="hadle-set">
              <el-button size="mini" type="warning" icon="el-icon-check" :disabled="select_list.length > 0 ? false : true" @click="applySet(1,0)">批量同意</el-button>
              <el-button size="mini" type="danger" icon="el-icon-close" :disabled="select_list.length > 0 ? false : true" @click="applySet(2,0)">批量拒绝</el-button>
              
          </div>
          <el-pagination
            background
            small
            :current-page="list.current_page"
            :page-size="list.per_page"
            layout="total, prev, pager, next, jumper"
            :total="list.total"
            @current-change="changePage"
          ></el-pagination>
        </div>
    </div>
    <!-- 模态框 -->
    <el-dialog :visible.sync="see_model" width="600px" title="会员信息">
        <el-form size="small" label-width="100px" label-position="left">
          <el-form-item v-for="(item,key) in user_info" :key="key" :label="item.name">
              <el-input v-model="item.value" v-if="item.type != 'images'" readonly></el-input>
              <img :src="item.value" style="max-width:200px" v-else>
          </el-form-item>
          <el-form-item>
              <el-button icon="el-icon-check" size="mini"  @click="applySet(1,MemberId)" type="primary">同意</el-button>
              <el-button icon="el-icon-close" size="mini"  @click="applySet(2,MemberId)" type="danger">拒绝</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from "../../components/unit/title.vue";

export default {
  components: { windowTitle },
  data(){
      return {
          list : {
              data : [{
                  user_info : {}
              }],
              current_page : 1
          },
          select_list : [],
          user_info : [],
          see_model : false,
          load : true,
          MemberId : '',
      }
  },
  mounted(){
      this.getData();
  },
  methods:{
      //查看入会表单信息
      see(data,MemberId){
          this.user_info = data;
          this.see_model = true;
          this.MemberId = MemberId;
      },
      //审核操作
      applySet(param,e){
          var url = param == 1 ? 'user/agreeApply' : 'user/refuseApply';
          var id = e == 0 ? this.select_list : e;
          this.ajaxs(url,{
              data :  {id : id},
              success:(res) => {
                  this.toast(res.code,res.msg);
                  if(res.code) {
                      this.getData();
                      this.see_model = false;
                  }
              }
          });
      },
      //获取加载数据
      getData(){
          this.load = true;
          this.ajaxs('user/userApply',{
              data :{page : this.list.current_page},
              success:(res) => {
                  this.list = res.msg
                  this.load= false;
              }
          });
      },
      //分页
      changePage(e){
          this.list.current_page = e;
          this.getData();
      },
      //全选
      handleSelectionChange(e){
          this.select_list = [];
          for(var i in e) {
              this.select_list.push(e[i].MemberId);
          }
          console.log(this.select_list);
      },
  }
};
</script>

<style>
.table-box{margin-top: 20px;}
.hadle-set{float:left}
.user-head-img{width: 30px;height: 30px;border-radius: 50%;vertical-align: middle}
</style>